<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <!--申请的key值--><!--  F0i6SrLmHquLVNLCqpExxPrj8mWVdFwx -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AQzdGwhPm0LrbrjckGMOGLPW74eQBqxN"></script>
    <!--加载鼠标绘制工具-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <!--加载检索信息窗口-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>

    <script src="/layuiadmin/layui/layui.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div id="map" style="-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
    </div>
</div>
</body>
<script src="/js/mapindex.js"></script>
<script>
    function detail(id){
        layui.config({
            base: '/layuiadmin/'//静态资源所在路径
        }).extend({
            CoreUtil : 'core-util/CoreUtil'
        }).use(['layer','layedit','CoreUtil'], function(){
            var $ = jQuery = layui.jquery;
            var CoreUtil = layui.CoreUtil;
            $("#map").height(window.innerHeight-30);
            var point_center = new BMap.Point(113.798659,22.690389);
            map.centerAndZoom(point_center, 16);

            var loadData = function(){
                CoreUtil.sendAjax("/manager/community/"+id,null,function (res) {
                    var community = res.data;

                    var community_points = new Array();
                    var community_boundary = community.boundary.split("#");

                    $.each(community_boundary,function(index,boundary){
                        var community_arr = boundary.split(",");
                        community_points.push(new BMap.Point(community_arr[0],community_arr[1]));
                    });
                    var community_polygon = new BMap.Polygon(community_points, community_polygon_style);  //创建多边形
                    map.addOverlay(community_polygon);
                    var community_center = community.center;
                    var community_p = community_center.split(",") ;
                    var community_point_center = new BMap.Point(community_p[0],community_p[1]);

                    map.centerAndZoom(community_point_center, 18);

                    var community_label = new BMap.Label(community.name, {offset:new BMap.Size(-20,-5), position:community_point_center});
                    community_label.setStyle(community_label_style);//对label 样式隐藏
                    map.addOverlay(community_label);

                    $.each(community.grids,function(index,grid){
                        //渲染边界
                        var grid_points = new Array();
                        var grid_boundary = grid.boundary.split("#");
                        $.each(grid_boundary,function(index,boundary){
                            var grid_arr = boundary.split(",");
                            grid_points.push(new BMap.Point(grid_arr[0],grid_arr[1]));
                        });
                        var grid_polygon = new BMap.Polygon(grid_points, grid_polygon_style);  //创建多边形
                        map.addOverlay(grid_polygon);
                        //渲染名称
                        var grid_center = grid.center;
                        var grid_p = grid_center.split(",") ;
                        var grid_point_center = new BMap.Point(grid_p[0],grid_p[1]);
                        var grid_label = new BMap.Label(grid.name, {offset:new BMap.Size(-20,-5), position:grid_point_center});
                        grid_label.setStyle(grid_label_style);//对label 样式隐藏
                        map.addOverlay(grid_label);
                    });
                },"GET",false,false);
            };
            loadData();
        })
    }
</script>
</html>